<template>
	<view class="all-boox">
		<!-- 绿色对勾图标 -->
		<view class="icon">
			<uni-icons class="icon-one" type="checkmarkempty" size="75" color="white"></uni-icons>
		</view>
		<view class="icon-text">
			预约成功
		</view>
		
		<view class="Order-number">
			预约编号:{{number}}
		</view>
		<!-- 返回主界面按钮 -->
		<view class="return-home" @click="">
			返回首页
		</view>
		<!-- 详情 -->
		<view class="orders-return" @click="toDetail">
			订单详情
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: "On996202410301939", // 单号
			}
		},
		methods: {
			toDetail(){
				uni.navigateTo({
					url:"/pages/maintenance/nearStore/storeDetail/reservation/reservationDetail/reservationDetail"
				})
			}

		}
	}
</script>

<style>
	/* .all-boox{
		background-color: #fff;
		height: 100%;
	} */
	.icon {
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		border-radius: 50%;
		background-image: linear-gradient(to top, #005bea 0%, #00c6fb 100%);
	}
	
	.icon-one{
		margin-left: 10rpx;
	}

	.icon-text {
		display: flex;
		font-size: 35rpx;
		font-weight: bold;
		height: 50rpx;
		margin: 0 auto;
		margin-top: 35rpx;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
	}

	.Order-number {
		/* background-color: aqua; */
		display: flex;
		font-size: 35rpx;
		font-weight: bold;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 130rpx;
		/* 设置一个高度以便垂直居中 */
	}
	.return-home{
		background-color: #376DF6;
		display: flex;
		font-size: 35rpx;
		color: #fff;
		margin: 80rpx 220rpx 30rpx;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 65rpx;
		border-radius: 15rpx;
	}
	.orders-return{
		background-color: #CECECE;
		display: flex;
		font-size: 35rpx;
		color: #fff;
		margin: 0 220rpx;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 65rpx;
		border-radius: 15rpx;
	}
</style>